import { Button, Modal, Popconfirm, Table, Select} from "antd";
import React from "react";
import API from "../../api/api";
import LinkInsert from './LinkInsert';
import LinkUpdate from "./LinkUpdate";
import {config} from "../../util/config";

let Option = Select;

export default class User extends React.Component{
    constructor(props) {
        super(props);
        // store.subscribe(() => {this.setState({visible:store.getState().visible})})
        this.state = {
            //根据类型绑定对象
            type:this.props.type,
            status:true,
            data : [],
            insertVisible:false,
            updateVisible:false,
            buttonVisible:false,
            selectedRowKeys: [], // Check here to configure the default column
            loading: false,
            visible:false
        };
        this.state.data = API.getLinks(this.state.type);
    }

    status = null;

    data = null;

    text = config.is_delete;

    columnForImage = {
        title: '图片',
        dataIndex: 'image_url',
        render: (record) => <img src={record} />,
        width: 150,
    }

    columnForLink = {
        title: '命名',
        dataIndex: 'name',
        ellipsis: {
            showTitle: true,
        },
        width: 150,
    }

    columns = [
        null,
        {
            title:"类型",
            dataIndex:"type",
            width: 60,
        },
        {
            title:"排序",
            dataIndex:"sortNum",
            width: 50,
            ellipsis: {
                showTitle: true,
            },
        },
        {
            title:"链接",
            dataIndex:"link",
            width: 100,
            ellipsis: {
                showTitle: true,
            },
        },
        {
            title:"建立人",
            dataIndex:"createUser",
            width: 130,
            ellipsis: {
                showTitle: true,
            },
        },
        {
            title:"建立时间",
            dataIndex:"createTime",
            width: 130,
            ellipsis: {
                showTitle: true,
            },
        },
        {
            title:"修改人",
            dataIndex:"updateUser",
            width: 130,
            ellipsis: {
                showTitle: true,
            },
        },
        {
            title:"修改时间",
            dataIndex:"updateTime",
            width: 130,
            ellipsis: {
                showTitle: true,
            },
        },
        {
            title: '操作',
            key: 'Options',
            width: 150,
            render: (text, record) => (
                <div>
                    <Button style={{marginRight:"0.5rem"}} type="primary" shape="round" size="middle" onClick={_=>{this.update(record)}}>
                        修改
                    </Button>
                    <Popconfirm placement="right" title={this.text} onConfirm={_=>{this.delete(record)}} okText="确定" cancelText="取消">
                        <Button type="primary" shape="round" style={{marginRight: "1rem", border: "0.1rem solid #ff7875"}} danger>
                            删除
                        </Button>
                    </Popconfirm>
                </div>
            ),
        },
    ];

    result=(result)=>{
        this.status = result;
    }

    insert = () => {
        this.status=false
        this.setState({
            insertVisible:true,
        });
    }

    //修改
    update = (record) => {
        this.status=false
        //把要修改的数据给data,作为父类参数传给LinkUpdate组件
        this.data = record
        sessionStorage.setItem("linkId",record.key);
        this.setState({
            updateVisible:true
        });
    }

    delete = (record) => {
        if(API.deleteLinks([record.key])){
            let tmpData = API.getLinks(this.state.type);
            this.setState({
                data:tmpData
            })
        }
    }

    deleteSelect=()=>{
        if(API.deleteLinks(this.state.selectedRowKeys)){
            let tmpData = API.getLinks(this.state.type);
            this.setState({
                status: true,
                data:tmpData
            });
        }
    }

    handleCancel = () => {
        //表示默认false,只有
        if(this.status==true){
            let tmpData = API.getLinks(this.state.type);
            this.status=false;
            this.setState({
                insertVisible: false,
                updateVisible:false,
                data:tmpData
            });
        }else{
            this.setState({
                insertVisible: false,
                updateVisible:false,
            });
        }
    };

    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({
            selectedRowKeys:selectedRowKeys,
        });
    };

    cancel = () => {
        // ajax request after empty completing
        this.setState({
            selectedRowKeys: [],
            loading: false,
            status:false
        });
    };

    render() {
        if(this.state.type=="link"){
            this.columns[0] = this.columnForLink
        }else {
            this.columns[0] = this.columnForImage
        }

        const { loading, selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        const hasSelected = selectedRowKeys.length > 0;
        return (
            <>
                <div style={{marginBottom:"1rem"}}>
                    <Button type="primary" onClick={this.insert} style={{marginRight:"0.5rem"}}>
                        添加
                    </Button>
                    <Button type="danger" onClick={this.deleteSelect} disabled={!hasSelected} style={{marginRight:"0.5rem"}}>
                        删除选中
                    </Button>
                    <Button type="primary" onClick={this.cancel} disabled={!hasSelected}>
                        取消
                    </Button>
                </div>
                <Table  rowSelection={rowSelection} columns={this.columns} dataSource={this.state.data} scroll={{ x: 80 }}/>
                <Modal
                    mask={false}
                    destroyOnClose
                    visible={this.state.insertVisible || this.state.updateVisible}
                    title={"链接管理"}
                    onOk={this.handleCancel}
                    onCancel={this.handleCancel}
                    footer={[
                        <Button key="back" onClick={this.handleCancel}>退出</Button>
                    ]}
                >
                    {this.state.insertVisible ? <LinkInsert type={this.state.type} result={this.result}/> : null}
                    {this.state.updateVisible ? <LinkUpdate data={this.data} type={this.state.type} result={this.result}/> : null}
                </Modal>
            </>
        );
    }
}
